@extends('layouts.main')

@section('content')
    <link rel="stylesheet" href="css/admin.css">
    <div class=" alert alert-info" style="font-size:18px;padding:5px;">
        订单号：&nbsp;&nbsp;{{$order->order_id ?? ''}}<br><br> 下单时间：&nbsp;&nbsp;{{$order->time ?? ''}}<br><br> 状态：&nbsp;&nbsp;{{$order->order_state_cn ?? ''}}
        <br><br>
        收货地址：{{$address->province ?? ''}}  {{$address->country ?? ''}}  {{$address->area ?? ''}}{{$address->details ?? ''}}
        &nbsp;({{$address->user_name ?? ''}}收）&nbsp;电话：{{$address->tell ?? ''}}<br>
    </div>

    <table class="table table-striped  text-center table-bordered table-hover table-condensed">
        <thead>
        <tr>
            <th class="info">商品图片</th>
            <th class="info">商品名称</th>
            <th class="info">尺码颜色</th>
            <th class="info">商品价格</th>
            <th class="info">购买数量</th>
            <th class="info">商品总价</th>
        </tr>
        </thead>

        @foreach($goodsMatch as $item)
            <tr>
                <td>
                    <img src=" {{$item->pic ?? ''}}" width="110" height="150;" alt="">
                </td>
                <td>{{$item->name ?? ''}}</td>
                <td>{{$item->color ?? ''}}
                    <br>{{$item->size ?? ''}}</td>
                <td>{{$item->price ?? ''}}</td>
                <td>{{$item->num ?? ''}}</td>
                <td>{{$item->totalprice ?? ''}}</td>
            </tr>
        @endforeach
    </table>
    <div>
        @if($comment)
            <div>
                <h3>评论：</h3>
                <p>{{$comment->details}}</p>
                <p>时间：{{$comment->time}}</p>
            </div>
        @else
            <div id="app">
                <h3>评论</h3>
                <div>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="">
                            <el-input type="textarea" v-model="form.details"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="info" size="small" @click="onSubmit">提交</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        @endif
    </div>

@endsection

@section('scripts')
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!-- import JavaScript -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <script>
        axios.interceptors.request.use((config) => {
            config.headers['X-Requested-With'] = 'XMLHttpRequest';
            config.headers['X-CSRFToken'] = document.getElementsByTagName('meta')['csrf-token'].content;
            return config
        });

        new Vue({
            el: '#app',
            data: function () {
                return {
                    form: {
                        details: '',
                        order_id: '{{$order->order_id}}',
                    },
                };
            }, methods: {
                onSubmit() {
                    axios.post('{{route('comment.store')}}', this.form).then((res) => {
                        if (res.data.status !== 0) {
                            this.$message(res.data.msg);
                        } else {
                            location.reload();
                        }
                    })
                }
            }, mounted() {
                let self = this;

            }
        });
    </script>

@endsection
